<template>
  <el-container>
    <el-header>
        <h3>管理员账号信息</h3>
    </el-header>
    <el-main>
      <el-form :model="form" ref="form" :rules="rule" label-position="right" label-width="180px">
          <el-form-item label="图像:" prop="imageUrl">
            <el-upload
              class="avatar-uploader"
              :action="upload_url"
              :show-file-list="false"
              :on-success="uploadSuccess"
              :before-upload="beforeUpload"
              :headers="header"
            >
              <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <div class="el-upload__tip" slot="tip">图片大小不能超过2M</div>
            </el-upload>
          </el-form-item>

        <el-form-item label="管理员昵称:" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="账号:" prop="username">
            <el-input v-model="form.username" disabled></el-input>
        </el-form-item>

        <el-form-item label="密码:" prop="password">
            <el-input v-model="form.password" show-password placeholder="如果需要修改密码,则输入新密码!"></el-input>
        </el-form-item>
        <el-form-item label="管理分校:" prop="school_id">
          <el-select v-model="form.school_id">
            <el-option
            v-for="item in schoolList"
            :key="item.id"
            :value="item.id"
            :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="管理员权限:" prop="auth">
          <el-switch v-model="form.auth"></el-switch>
        </el-form-item>
      </el-form>
    </el-main>

    <el-footer>
      <el-button type="primary" :loading="loading"  @click.prevent="updateInfo" icon="el-icon-edit">更新</el-button>
    </el-footer>
  </el-container>
</template>

<script>
    import {getAdminInfo, updateAdminInfo} from '@/api/manager'
    import {getToken} from '@/utils/auth'
    import {schoolList} from '@/api/school'
    export default {
        name: "info",
        inject: ['reload'],
        data () {
            return {
                upload_url: 'https://huaxin.ioboo.cn/admin/uploadManagerImage',
                header: {
                    Authorization: getToken()
                },
                form: {
                    imageUrl: '',
                    name: '',
                    username: '',
                    password: '',
                    school_id: '',
                    auth: true,
                },
                rule: {
                    imageUrl: [
                        {required: true, message: '管理员图像不能为空'}
                    ],
                    name: [
                        {required: true, message: '管理员昵称为必填项', trigger: 'blur'},
                        {max:50, message: '管理员昵称最大长度为50个字符', trigger: ['change','blur']}
                    ],
                    school_id: [
                        {required: true, message: '管理分校为必选项'},
                        {type: 'number', message: '分校类型有误'}
                    ],
                    auth: [
                        {required: true, }
                    ],
                    password: [
                        {min:5, message: '密码最少长度为5位', trigger: ['change']}
                    ]
                },
                schoolList: [],
                loading: false,
                admin_id: 0,
            };
        },
        methods: {
            uploadSuccess(response, file, fileList) {
                if (response.code == 200) {
                    this.form.imageUrl = response.data.url;
                } else {
                    this.$notify.error(response.msg);
                }
            },
            beforeUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isLt2M;
            },
            //更新数据
            updateInfo() {
                this.$refs.form.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    this.loading = true;
                    var data = {
                        admin_id: this.admin_id,
                        avatar: this.form.imageUrl,
                        name: this.form.name,
                        username: this.form.username,
                        password: this.form.password,
                        school_id: this.form.school_id,
                        auth_status: this.form.auth === true ? 1 : 2,
                    };
                    updateAdminInfo(data).then(response => {
                        this.$message.success(response.msg);
                        this.loading = false;
                        this.reload();
                    }).catch(err => {
                        this.loading = false;
                    })

                });
            }
        },

        mounted() {
            this.admin_id = this.$route.query.admin_id;
            //首先获取所有的分校信息
            schoolList().then(response => {
                this.schoolList = response.data;
                //获取的当前的管理员的信息
                getAdminInfo({admin_id: this.admin_id}).then(response => {
                    this.form = response.data;
                })
            }).catch(err => {

            })
        }
    }
</script>

<style scoped>
  .el-container {
    width: 70%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    border: 1px solid #F2F6FC;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    margin: 10px auto;
  }

  .el-header {
    text-align: center;
  }

  .el-header h3 {
    font-size: 20px;
    height: 20px;
    line-height: 20px;
  }

  .el-input {
    width: 50%;
  }

  .el-footer {
    text-align: center;
  }
</style>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
